<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../libs/theme-dark/index.css" />
  </head>
  <body>
    <div id="app">
      <ve-table
        :columns="columns"
        :table-data="tableData"
        :expand-option="expandOption"
        row-key-field-name="rowKey"
      ></v-table>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../../../libs/umd/index.js"></script>
  <script>

    new Vue({
      el: "#app",
      data: function() {
        return {
          expandOption: {
            defaultExpandedRowKeys: [1001, 1003],
            render: ({ row, column, rowIndex },h) => {
              return 122112121
            },
        },
          columns: [
          {
            field: "",
            key: "a",
            // 设置需要显示展开图标的列
            type: "expand",
            title: "",
            width: 50,
            align: "center"
          },
          {
            field: "date",
            key: "b",
            title: "Date",
            width: 200,
            align: "center",
            renderBodyCell:({row},h)=>{
              return  h('div',row.tel)
            }
          },
          {
            field: "hobby",
            key: "c",
            title: "Hobby",
            width: 300,
            align: "left",
          },
          {
            field: "address",
            key: "d",
            title: "Address",
            width: "",
            align: "left",
          },
          ],
          tableData: [
          {
            rowKey: 1001,
            name: "John",
            date:"1900-05-20",
            hobby: "coding",
            address: "No.1 Century Avenue, Shanghai",
          },
          {
            rowKey: 1002,
            name: "Dickerson",
            date:"1910-06-20",
            hobby: "coding",
            address: "No.1 Century Avenue, Beijing",
          },
          {
            rowKey: 1003,
            name: "Larsen",
            date:"2000-07-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Chongqing",
          },
          {
            rowKey: 1004,
            name: "Geneva",
            date:"2010-08-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Xiamen",
          },
          {
            rowKey: 1005,
            name: "Jami",
            date:"2020-09-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shenzhen",
          },
          ],
        };
      },
    });
  </script>
</html>
